<template>
  <div>
    <Header>
      <p class="switchs">
        分销设置&nbsp;
        <el-switch v-model="send" @change="switchTag"> </el-switch>
      </p>
    </Header>

    <div>
      <Header>
        <el-tabs v-model="options" class="tabs">
          <el-tab-pane label="分销员设置" name="disASet"></el-tab-pane>
          <el-tab-pane label="分佣设置" name="disBSet"></el-tab-pane>
        </el-tabs>
      </Header>
      <div>
        <dis-a-set v-if="options == 'disASet'" @showTag="showTag" />
        <dis-b-set v-if="options == 'disBSet'" @showTag="showTag" />
      </div>
    </div>
  </div>
</template>
<script>
import { ISDISTRIBUT, ISDISTRIBUTE } from "./service";

export default {
  components: {
    disASet: () => import("./component/disSet/disASet"),
    disBSet: () => import("./component/disSet/disBSet")
  },
  data() {
    return {
      send: false,
      options: "disASet"
    };
  },
  created() {
    this.lock();
  },
  methods: {
    showTag(e) {
      this.shows = e;
    },
    async switchTag() {
      await ISDISTRIBUT({ is_distribut: this.send ? 1 : 0 }).then(
        ({ code, msg }) => {
          if (code === 200) this.send = true;
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    async lock() {
      await ISDISTRIBUTE().then(({ code, data }) => {
        if (code === 200) {
          this.send = data === 1;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.switchs {
  margin: 20px 16px;
  font-size: 20px;
  font-weight: bold;
  padding-left: 20px;
}
.tabs {
  width: 168px;
  margin-left: 60px;
}
.news {
  height: 80px;
  text-align: left;
  line-height: 70px;
  padding-left: 20px;
  border-bottom: 10px solid #f3f3f3;
  span {
    font-size: 14px;
    color: #aaaaaa;
  }
}
</style>
